<style rel="stylesheet/scss" lang="scss" scoped>
	.good-containter{
		display: flex;
		flex: 1;
		height: 100%;
		padding: 10px 0px 10px 10px;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
	}
	
</style>
<template>
	<div class="good-containter" id="good-containter">
		<!--tabs 公用tab -->
		<tabs :target-list="targetList"></tabs>
		<good-management v-if="tabCurrentIndex == 1" @handleModelClick="handleModelClick" @newProductFn="newProductFn" @editModelClick="editModelClick"></good-management>
		<!--新建商品-->
		<new-product v-if="tabCurrentIndex == 2" :pro-step="proStep" @updateAttrStep="updateAttrStep" :goods-id="goodsId" :sec-cat-id="secCatId" @setTableHead="setTableHead" :step="step" @nextStep="nextStep"></new-product>
		<!--设置表头-->
		<tab-list-box v-if="tabCurrentIndex == 3" :goods-id="goodsId" :sec-cat-id="secCatId" @setTabHread="setTabHread"></tab-list-box>
	</div>
</template>
<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import tabs from '@/components/tabs/tabs.vue'
	import goodManagement from './components/good-management.vue'
	import newProduct from './components/new-product.vue'
	import tabListBox from './components/tab-list-box.vue'
	export default {
		
		data() {
			return {
				step: 0, // 当前新建商品的步骤 
				goodsId: '', // 商品id
				secCatId: '', // 二级分类id
				targetList: {},
				proStep:false
			}
		},
		methods: {
			updateAttrStep() {
				let list = this.tabList
				list.forEach((item, index) => {
					if(item.title == '新建商品' || item.title == '编辑商品'){
						list.splice(index,1)
					}
				})
				this.setTabList(list)
				this.setTabCurrentIndex(1)
			},
			setTabHread() {
				this.step = 1
			},
			editModelClick(item) {
				console.log(item)
				this.goodsId = item.goodsId
				this.secCatId = item.secCatId
				this.step = 2
				let list = this.tabList
				
				list.forEach((item, index) => {
					if(item.title == '新建商品'){
						list.splice(index,1)
					}
				})
				this.setTabList(list)
				this.targetList = {name: '2', title: '编辑商品'},
				this.setTabCurrentIndex(2)
			},
			nextStep(catId) {
				//this.goodsId = goodsId
				this.secCatId = catId
				//alert(this.secCatId)
			},
			// 新建商品
			newProductFn() {
				this.step = 0
				let list = this.tabList
				this.proStep = false
				list.forEach((item, index) => {
					if(item.title == '编辑商品'){
						list.splice(index,1)
					}
				})
				this.setTabList(list)
				this.targetList = {name: '2', title: '新建商品'}
			},
			setTableHead() {
				this.targetList = {name: '3', title: '设置表头'}
			},
			handleModelClick(item) {
				this.goodsId = item.goodsId
				this.secCatId = item.secCatId
				this.step = 1
				this.proStep = true
				this.targetList = {name: '2', title: '新建商品'}
				this.setTabCurrentIndex(2)
			},
			...mapMutations({
				setTabList: 'SET_TAB_LIST',
				setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
			})
		},
		components: {
			tabs,
			newProduct,
			tabListBox,
			goodManagement
		},
		computed: {
			...mapGetters([
				'tabList',
				'tabCurrentIndex'
			])
		}
	}
</script>